import { Divider } from 'antd'
import Heading from './Heading'
import Section from './Section';

const View: React.FC = () => {

    return (
        <>
            <Divider orientation="left">useContext</Divider>
            <p>通常，你会通过 props 将信息从父组件传递给子组件。但是，如果要在组件树中深入传递一些 prop，或者树里的许多组件需要使用相同的 prop，那么传递 prop 可能会变得很麻烦。Context 允许父组件将一些信息提供给它下层的任何组件，不管该组件多深层也无需通过 props 逐层透传。</p>
            <Section level={1}>
                <Heading>主标题</Heading>
                <Section level={2}>
                    <Heading>副标题</Heading>
                    <Heading>副标题</Heading>
                    <Heading>副标题</Heading>
                    <Section level={3}>
                        <Heading>子标题</Heading>
                        <Heading>子标题</Heading>
                        <Heading>子标题</Heading>
                        <Section level={4}>
                            <Heading>子子标题</Heading>
                            <Heading>子子标题</Heading>
                            <Heading>子子标题</Heading>
                        </Section>
                    </Section>
                </Section>
            </Section>
        </>
    )
}

export default View